<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .Surface {
        position: relative;
        width: 400px;
        height: 400px;
        margin: 0 auto;
        border: 1px solid #000;
        background-color: #cecece;
      }
      .Surface > div {
        position: absolute;
        /* left: 20px;
        top: 20px; */
        width: 100px;
        height: 100px;
        border-radius: 5px;
        font-size: 100px;
        line-height: 100px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="Surface">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </body>
  <script>
    //随机颜色
    var RandomColor = () => {
      var R = parseInt(Math.random() * 256);
      var G = parseInt(Math.random() * 256);
      var B = parseInt(Math.random() * 256);
      return "rgb(" + R + "," + G + "," + B + ")";
    };
    // var rc = RandomColor();
    // console.log(rc);
    var aDiv = document.querySelectorAll(".Surface div");
    var mg = 20; //区块间距
    aDiv.forEach((div) => {
      div.style.backgroundColor = RandomColor();
    });
    var str = "ABCDEFGHI"; //九宫格内容
    for (let j = 0; j < 3; j++) {
      //双循环定位九宫格
      for (let i = 0; i < 3; i++) {
        aDiv[i * 3 + j].style.top = (aDiv[0].offsetHeight + mg) * i + mg + "px";
        aDiv[i * 3 + j].style.left = (aDiv[0].offsetWidth + mg) * j + mg + "px";
        aDiv[i * 3 + j].innerHTML = str[i * 3 + j];
      }
    }
    //拖拽
    aDiv.forEach((div) => {
      div.onmousedown = (ev) => {
        ev.preventDefault();
        let x = ev.offsetX;
        let y = ev.offsetY;
        //克隆节点，做一个占位
        //方便以后进行距离比较、位置交换
        var cloneDiv = div.cloneNode();
        cloneDiv.style.border = "1px solid #000";
        var Surface = document.querySelector(".Surface");
        Surface.replaceChild(cloneDiv, div);
        Surface.appendChild(div);
        div.style.zIndex = 1;
        document.onmousemove = (ev) => {
          ev.preventDefault();
          let l = ev.clientX - x - Surface.offsetLeft;
          let t = ev.clientY - y - Surface.offsetTop;
          div.style.left = l + "px";
          div.style.top = t + "px";
        };
        document.onmouseup = () => {
          //获取距离保存数组
          let aDistance = [];
          let aDiv = Surface.querySelectorAll("div"); //十个数据
          // console.log(aDiv);
          for (let i = 0; i < aDiv.length - 1; i++) {
            //不需要和自身比较
            let disX = div.offsetLeft - aDiv[i].offsetLeft;
            let disY = div.offsetTop - aDiv[i].offsetTop;
            let dis = Math.sqrt(disX * disX + disY * disY);
            aDistance.push(dis);
          }
          //取最小距离索引
          let minIndex = 0;
          for (let i = 0; i < aDistance.length; i++) {
            if (aDistance[minIndex] > aDistance[i]) {
              minIndex = i;
            }
          }
          //交换
          div.style.left = aDiv[minIndex].style.left;
          div.style.top = aDiv[minIndex].style.top;
          aDiv[minIndex].style.left = cloneDiv.style.left;
          aDiv[minIndex].style.top = cloneDiv.style.top;
          cloneDiv.remove();
          document.onmousemove = null;
          document.onmouseup = null;
        };
      };
    });
  </script>
</html>
